<template>
  <div class="container">
    <Sidebar></Sidebar>
    <div class="header">
      <el-breadcrumb separator=" " class="header1">
        <el-breadcrumb-item class="item1-all"
          ><span @click="getAll" :class="{ highlight: all }"
            >全部</span
          ></el-breadcrumb-item
        >
        <el-breadcrumb-item class="item1-boy"
          ><span @click="getBoy" :class="{ highlight: boy }"
            >男歌手</span
          ></el-breadcrumb-item
        >
        <el-breadcrumb-item class="item1-girl"
          ><span @click="getGirl" :class="{ highlight: girl }"
            >女歌手</span
          ></el-breadcrumb-item
        >
        <el-breadcrumb-item class="item1-group"
          ><span @click="getGroup" :class="{ highlight: group }"
            >乐队</span
          ></el-breadcrumb-item
        >
        <el-breadcrumb-item></el-breadcrumb-item>
      </el-breadcrumb>
      <el-breadcrumb separator=" " class="header2">
        <el-breadcrumb-item class="item2-all"
          ><span @click="getAll2" :class="{ highlight: all2 }"
            >全部</span
          ></el-breadcrumb-item
        >
        <el-breadcrumb-item class="item2-chi"
          ><span @click="getChi" :class="{ highlight: chi }"
            >华语</span
          ></el-breadcrumb-item
        >
        <el-breadcrumb-item class="item2-eng"
          ><span @click="getEng" :class="{ highlight: eng }"
            >欧美</span
          ></el-breadcrumb-item
        >
        <el-breadcrumb-item class="item2-jap"
          ><span @click="getJap" :class="{ highlight: jap }"
            >日本</span
          ></el-breadcrumb-item
        >
        <el-breadcrumb-item class="item2-kar"
          ><span @click="getKar" :class="{ highlight: kar }"
            >韩国</span
          ></el-breadcrumb-item
        >
        <el-breadcrumb-item class="item2-oth"
          ><span @click="getOth" :class="{ highlight: oth }"
            >其他</span
          ></el-breadcrumb-item
        >
        <el-breadcrumb-item></el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="content">
      <div v-for="(singer, index) in singers" :key="index">
        <div class="img-name" @click="getSingerDetail(index)">
          <div class="imgs">
            <img
              :src="singer.img1v1Url"
              :alt="singer.name"
              :title="singer.name"
              class="img"
              v-show="index < 10"
            />
          </div>
          <div class="" v-show="index < 10">{{ singer.name }}</div>
        </div>
        <div class="names">
          <div class="name" v-show="index >= 10">{{ singer.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Sidebar from "@/components/Sidebar";
import { resSinger, resSingerDetail } from "@/api";
export default {
  name: "singer",
  data() {
    return {
      //存储歌手的图片和名字
      singers: [],
      //传递的参数
      item1: "",
      item2: "",
      //是否被选中
      all: "true",
      boy: "",
      girl: "",
      group: "",
      all2: "true",
      chi: "",
      eng: "",
      jap: "",
      kar: "",
      oth: "",
      //获取点击歌手的id
      id: "",
    };
  },
  components: {
    Sidebar,
  },
  mounted() {
    this.getSinger();
  },
  methods: {
    //发送获得歌手的请求
    async getSinger() {
      await resSinger(this.item1, this.item2, 10)
        .then((res) => {
          this.singers = res.data.artists;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getAll() {
      this.item1 = -1;
      //是否被选中
      this.all = true;
      this.boy = false;
      this.girl = false;
      this.group = false;
      this.getSinger();
    },
    getBoy() {
      this.item1 = 1;
      this.all = false;
      this.boy = true;
      this.girl = false;
      this.group = false;
      this.getSinger();
    },
    getGirl() {
      this.item1 = "2";
      this.all = false;
      this.boy = false;
      this.girl = true;
      this.group = false;
      this.getSinger();
    },
    getGroup() {
      this.item1 = "3";
      this.all = false;
      this.boy = false;
      this.girl = false;
      this.group = true;
      this.getSinger();
    },
    getAll2() {
      this.item2 = "-1";
      this.all2 = true;
      this.chi = false;
      this.eng = false;
      this.jap = false;
      this.kar = false;
      this.oth = false;
      this.getSinger();
    },
    getChi() {
      this.item2 = "7";
      this.all2 = false;
      this.chi = true;
      this.eng = false;
      this.jap = false;
      this.kar = false;
      this.oth = false;
      this.getSinger();
    },
    getEng() {
      this.item2 = "96";
      this.all2 = false;
      this.chi = false;
      this.eng = true;
      this.jap = false;
      this.kar = false;
      this.oth = false;
      this.getSinger();
    },
    getJap() {
      this.item2 = "8";
      this.all2 = false;
      this.chi = false;
      this.eng = false;
      this.jap = true;
      this.kar = false;
      this.oth = false;
      this.getSinger();
    },
    getKar() {
      this.item2 = "16";
      this.all2 = false;
      this.chi = false;
      this.eng = false;
      this.jap = false;
      this.kar = true;
      this.oth = false;
      this.getSinger();
    },
    getOth() {
      this.item2 = "0";
      this.all2 = false;
      this.chi = false;
      this.eng = false;
      this.jap = false;
      this.kar = false;
      this.oth = true;
      this.getSinger();
    },
    //获得歌手详情请求
    getSingerDetail(index) {
      //获取点击歌手id
      this.id = this.singers[index].id;
      // console.log(this.singers[index].id);
      this.$router.push({path:'/message',query:{id:this.id}})
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  .header {
    margin-top: 3em;
    margin-left: 10em;
    font-family: cursive;
    font-size: 0.9em;

    .header1 {
      margin: 1em;
      font-size: 1.4em;
      .item1-all {
        margin-right: 0.8em;
      }

      .item1-boy {
        margin-right: 0.8em;
      }
      .item1-girl {
        margin-right: 0.8em;
      }
      .item1-group {
        margin-right: 0.8em;
      }
    }
    .header2 {
      margin: 1em;
      font-size: 1.4em;
      .item2-all {
        margin-right: 0.8em;
      }
      .item2-chi {
        margin-right: 0.8em;
      }
      .item2-eng {
        margin-right: 0.8em;
      }
      .item2-jap {
        margin-right: 0.8em;
      }
      .item2-kar {
        margin-right: 0.8em;
      }
      .item2-oth {
        margin-right: 0.8em;
      }
    }
    // 重新覆盖一下字体样式的组件样式(原本是蓝色的)
    .header1 /deep/ .el-breadcrumb__inner {
      color: black;
    }
    .header2 /deep/ .el-breadcrumb__inner {
      color: black;
    }
    span:hover {
      color: rgb(206, 5, 5);
    }
  }
  .highlight {
    background: rgb(228, 38, 38);
    padding: 0.3em;
    color: white;
    //取消悬浮效果
    pointer-events: none;
  }
  .content {
    display: flex;
    flex-wrap: wrap;
    margin: 2em 7em;
    .img-name {
      margin: 3.5em;
      text-align: center;
    }
    .imgs {
      .img {
        display: inline-block;
        width: 8em;
        height: 7.5em;
        border-radius: 50%;
      }
    }
    .names {
      .name {
      }
    }
  }
}
</style>